<template>
	<div id="school_account_detail">
		<div class="content-detail">
			<div class="">
				<!-- <div class="row">
					<span style="font-size:0.2rem;">校区账单</span>
				</div> -->
				<div class="row">
					<el-select class="comSearchInput" filterable @change="changeCampus" clearable v-model="selectSchool" placeholder="所有校区">
						<el-option
						v-for="item in schoolOptions"
						:key="item.value"
						:label="item.label"
						:value="item.value">
						</el-option>
					</el-select>
					<el-date-picker
						class="comSearchInput"
						v-model="selectTime"
						type="datetimerange"
						range-separator="至"
						align="center"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						:default-time="['00:00:00', '00:00:00']"
						@change="changeTime"
					>
					</el-date-picker>
					<!-- <el-button @click="apiQueryCampusAccountRecord()">查询</el-button> -->
					<div class="search_btn" @click="apiQueryCampusAccountRecord()">搜索</div>
				</div>
				<div class="row">
					<el-table
						:data="tableData"
						stripe
						style="width: 100%">
						<el-table-column
						width="160px"
						prop="accountDate"
						align="center"
						label="时间">
						</el-table-column>
						<el-table-column
						prop="campusName"
						align="center"
						label="校区">
						</el-table-column>
						<el-table-column
						align="center"
						label="充值/支出">
							<template slot-scope="scope">
								<span v-if="scope.row.accountType==1">充值</span>
								<span v-else-if="scope.row.accountType==2" >支出</span>
								<span v-else-if="scope.row.accountType==3" >退款</span>
							</template>
						</el-table-column>
						<el-table-column
						label="金额"
						align="center">
						<template slot-scope="scope">
							<span v-if="scope.row.accountType!=2" style="color:rgb(25, 177, 13);">{{'+￥'+scope.row.accountMoney}}</span>
							<span v-else style="color:rgb(255,20,20);">{{'-￥'+scope.row.accountMoney}}</span>
						</template>
						</el-table-column>
						<el-table-column
						:show-overflow-tooltip="true"
						prop="accountNo"
						align="center"
						label="交易号">
						</el-table-column>
						<el-table-column
						prop="campusMoney"
						align="center"
						label="账户余额">
						</el-table-column>
					</el-table>
				</div>
				<div class="row" style="text-align:center;">
					<el-pagination
						@size-change="handleSizeChange"
						:page-sizes="[10, 20, 30, 40,50,100]"
						layout="total, sizes, prev, pager, next, jumper"
						:total="pagination.total"
						:current-page="searchParam.currPage"
						:page-size="searchParam.pageSize"
						@current-change="currentPageChange">
					</el-pagination>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	let vm;
	export default{
		components:{},
		// props:['schoolAccountDetail'],
		data(){
			return {
				schoolOptions: [],
				selectSchool: '',
				selectTime:'',
				tableData: [],
				pagination:{
					total:0
				},
				searchParam:{
					campusId:'',
					accountType:0,
					// startTime:'',
					// endTime:'',
					pageSize:10,
					currPage:1
				}
			};
		},
		methods:{
			initByData(schoolInfo,schoolList){
				
				this.selectSchool=schoolInfo.campusId;
				vm.schoolOptions=[];
				schoolList.forEach(element => {
					vm.schoolOptions.push({
						value:element.campusId,
						label:element.name
					});
				});
				this.searchParam={
					campusId:schoolInfo.campusId,
					accountType:0,
					// startTime:'',
					// endTime:'',
					pageSize:10,
					currPage:1
				};
				this.apiQueryCampusAccountRecord();
			},
			/**查询校区下的充值、支出、退费记录
			 * @param campusId
			 * @param accountType 收支类别：全部-0；充值-1；支出-2；退款-3
			 * @param startTime
			 * @param endTime
			 * @param pageSize
			 * @param currPage
			 */
			apiQueryCampusAccountRecord(pageNum){
				this.searchParam.currPage=pageNum||1;
				api.queryCampusAccountRecord(this.searchParam).then(function(d){
					if(d.result=='操作成功'){
						vm.pagination.total=d.totalCount;
						vm.tableData=d.list;
					}
				});
			},
			/**匹配得到billlmode的中文含义 */
			matchBillMode(value){
				for(let i=0;i<this._billmode.length;i++){
					if(this._billmode[i].value===value){
						return this._billmode[i].name;
					}
				}
			},
			handlePaneClick(tab, event){

			},
			/**翻页 */
			currentPageChange(d){
				this.apiQueryCampusAccountRecord(d);
			},
			/**切换每页个数 */
			handleSizeChange(val){
				this.searchParam.pageSize=val;
				this.searchParam.currPage=1;
				this.apiQueryCampusAccountRecord();
			},
			/**切换校区 */
			changeCampus(d){
				// debugger
				if(!d){
					let newparam={};
					for(let k in this.searchParam){
						if(k=='campusId')continue;
						newparam[k]=this.searchParam[k];
					}
					this.searchParam=newparam;
				}
				else
					this.searchParam.campusId=d;
				// this.apiQueryCampusAccountRecord();
			},
			/**切换时间 */
			changeTime(d){
				let start,end;
				if(d)
				{
					start=tool.DateToString(d[0], "yyyy-MM-dd HH:mm");
					end=tool.DateToString(d[1], "yyyy-MM-dd HH:mm");
					this.searchParam.startTime=start;
					this.searchParam.endTime=end;
				}
				else{
					let newparam={};
					for(let k in this.searchParam){
						if(k=='startTime'||k=='endTime')continue;
						newparam[k]=this.searchParam[k];
					}
					this.searchParam=newparam;
				}
				// this.apiQueryCampusAccountRecord();
			}
		},
		mounted(){
			// this._userInfo = tool.getItem(lsKey.user, true); //得到当前用户信息
			// this.disableOperationByRole();
			vm=this;
			// this.initByData();
		},
		computed:{
			
		},
		watch:{

		}
	}
</script>

<style lang="scss">
	#school_account_detail{
		color: #333333;
		.content-detail{
			.row{
				width: 100%;
				min-height: 0.16rem;
				margin: 0.08rem 0;
			}
		}
		

		//鼠标悬浮
		.hoverpointer:hover{
			cursor: pointer;
		}
		// 滚动条
		.scrollbarstyle::-webkit-scrollbar {
			width: 0.05rem;
		}
		.scrollbarstyle::-webkit-scrollbar-thumb {
			border-radius: 0.5rem;
			background: #BBBBBB;
		}
		.scrollbarstyle::-webkit-scrollbar-track {
			background: #F2F6FC;
		}
		.el-table__body-wrapper::-webkit-scrollbar {
			width: 0.05rem;
		}
		.el-table__body-wrapper::-webkit-scrollbar-thumb {
			border-radius: 0.5rem;
			background: #BBBBBB;
		}
		.el-table__body-wrapper::-webkit-scrollbar-track {
			background: #F2F6FC;
		}
	}
	.schoolAccountDetailPopup{

	}
	// 搜索框样式
	.comSearchInput .el-input__inner {
		background-color: #f7f8fa;
		border-radius: 0.08rem;
		font-size: 0.16rem;
		color: #666666;
		height: 0.36rem !important;
		line-height: 0.36rem !important;
	}
	.comSearchInput.el-input__inner {
		background-color: #f7f8fa;
		border-radius: 0.08rem;
		font-size: 0.16rem;
		color: #666666;
		height: 0.36rem !important;
		line-height: 0.36rem !important;
		padding: 0 0.1rem !important;
		.el-range-input{
			font-size: 0.16rem !important;
			color: #666666 !important;
			background-color: #f7f8fa !important;
		}
	}
</style>